<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .add {
        border: 1px solid #000;
        max-width: 500px;
        margin-bottom: 20px;
        padding: 20px;
        text-align: center;
    }

    table,
    td,
    th {
        border: 1px solid #000;
        border-collapse: collapse;
        width: 700px;
        text-align: center;
    }
</style>

<body>
    <div id="app">
        <div class="add">
            编号:
            <input type="text" v-model="code">
            品牌名称:
            <input type="text" v-model="goodsName">
            <br>
            产品图片地址:
            <input type="text" v-model="imgUrl">
            价格:
            <input type="text" v-model="price">
            <button @click="add">点击增加</button>
        </div>
        <div class="tb">
            <table>
                <tr>
                    <th>
                        <input type="checkbox" @change="allCheckChange" 
                        :checked="isCheck">
                    </th>
                    <th>
                        产品图片
                    </th>
                    <th>
                        编号
                    </th>
                    <th>
                        品牌名称
                    </th>
                    <th>
                        价格
                    </th>
                    <th>
                        数量
                    </th>
                    <th>
                        操作
                    </th>
                </tr>
                <tr v-for="(item,i) in goods">
                    <td>
                        <input type="checkbox"  v-model="checks" :value="item">
                    </td>
                    <td>
                        <img width="50" height="50" :src="item.imgUrl" alt="">
                    </td>
                    <td>
                        {{item.code}}
                    </td>
                    <td>
                        {{item.goodsName}}
                    </td>
                    <td>
                        {{item.price}}
                    </td>
                    <td>
                        <button :disabled="item.inventory==1" @click="decrease(item)">-</button>
                        <b> {{item.inventory}}</b>
                        <button @click="increase(item)">+</button>
                    </td>
                    <td>
                        <button @click="del(i)">删除</button>
                    </td>
                </tr>
            </table>
            <div class="add" v-show="!goods.length">
                没有更多数据了
            </div>
            <div class="add" style="max-width:650px !important;text-align: center !important;">
                 <h1>总价:{{total}}</h1>
            </div>
        </div>
    </div>
</body>

</html>
<script src='https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js'></script>
<script>

    //增加
    //1.给输入框使用v-model绑定数据

    //2.往goods数组中,多增加一个对象,视图就会多增加一个,使用数组的push

    //删除

    //1.点击按钮,获取当前这条数据的索引

    //2.使用数组的方法splice(索引,1) 就能删除

    //全选和反选
    //1、点击全选按钮所有的选择框都要被选中
    //[checks的length 和goods的length 相同就是全选]
    //2、再次点击全选、所有的选择框取消选择
    //[侦听checks的数组长度,如果check的长度和goods的长度一样时选中]
    //3、勾选列表中的选择框、全部选择时、全选也要被选择
    

    //计算购物车的总结
    //需要用到计算属性
    //computer

    let vm = new Vue({
        el: "#app",
        watch:{
            //监听checks的长度
            checks(newVal){
                // console.log(newVal);
                //当checks数组的length和goods数组的lenghtxi
                if(newVal.length === this.goods.length){
                    this.isCheck = true
                }else{
                    this.isCheck = false
                }
            }
        },
        computed: {
            total(){
               let res = this.checks.reduce(function(total,item){
                     return total+=item.price*item.inventory
               },0)
               return res.toFixed(2);
            }  
        },
        data: {
            code: "",
            imgUrl: "",
            goodsName: "",
            price: "",
            checks:[],
            isCheck:false,
            priceDuce:0.00,
            goods: [
                {
                    id: 1,
                    goodsName: "苹果",
                    imgUrl: "https://ts1.cn.mm.bing.net/th/id/R-C.d6d3aae7006611f68786a47e377c39ea?rik=7IrzMCwE5z2KgQ&riu=http%3a%2f%2fpic.ntimg.cn%2f20131028%2f13984383_171843651115_2.jpg&ehk=4SCA2042hzkkZofnLUSML2WgVzwz9RMXyKkXwc2zHG0%3d&risl=&pid=ImgRaw&r=0",
                    price: "20",
                    inventory: 30,
                    code: 1
                },
                {
                    id: 2,
                    goodsName: "香蕉",
                    imgUrl: "https://ts1.cn.mm.bing.net/th/id/R-C.d1a6957661d8dbfbd0cb3a7ef14cd7d6?rik=ltM8ZHpR39OuhA&riu=http%3a%2f%2fpic32.photophoto.cn%2f20140828%2f0012024907646838_b.jpg&ehk=wAQVHp9i%2fC7aPHXs6FExKS3mHQcrt%2ft%2fKDFSD2FGa1k%3d&risl=&pid=ImgRaw&r=0",
                    price: "120",
                    inventory: 10,
                    code: 2
                },
                {
                    id: 3,
                    goodsName: "橘子",
                    imgUrl: "https://img.zcool.cn/community/016af55dea2e44a801209568054e81.jpg@1280w_1l_2o_100sh.jpg",
                    price: "220",
                    inventory: 40,
                    code: 3
                },
            ]
        },
        methods: {
            add() {

                //非空验证
                if (!this.code || !this.price || !this.goodsName) {
                    return
                }

                //编程思路:一切基于数据,以数据驱动

                //先声明一个对象
                let obj = {
                    id: Math.random().toString(32).substring(2),
                    goodsName: this.goodsName,
                    code: this.code,
                    imgUrl: this.imgUrl ? this.imgUrl : 'https://img.zcool.cn/community/03196b456d7e744000001490d57799f.jpg@260w_195h_1c_1e_1o_100sh.jpg',
                    price: this.price,
                    inventory: 1
                }

                this.goods.push(obj)
            },
            del(i) {
               let target =  this.goods.splice(i, 1);
               console.log(target);
               //拿到删除的数组
               //取到目标的id
               //与this.checks中的id做比较
               //返回目标元素和item作比较
              this.checks = this.checks.filter(item => item.id !== target[0].id)
            },
            // 数量增加
            increase(item) {
                console.log(item)
                item.inventory++
            },
            //数量减少
            decrease(item) {
                item.inventory--
            },
            //点击全选
            allCheckChange(e){
                //拿到checked属性的ture or false
                let checked = e.target.checked;
                if(checked){
                    this.checks = this.goods
                }else{
                    this.checks=[]
                }
                
            }
        }
    })
</script>